<template>
	<view class="conter">
		<view class="Abouts" v-show="list.length == 0">
			<u--image width="360rpx" height="300rpx" :src="imgUrl + '/appStatic/images/monbabyone.gif'"
				alt=""></u--image>
		</view>
		
			<view class="list-item" v-for="(item, index) in list" :key="index" v-show="list.length > 0">
				<view style="padding:0 40rpx 0 40rpx; ">
					<view style="padding-top:40rpx">
						<view style="display: flex; justify-content: start; align-items: center">
							<view class="font">
								{{ item.receiver }}
							</view>
							<view style="margin-left: 25rpx" class="font">
								{{ item.phone }}
							</view>
							<view style="margin-left: 15rpx">
								<u-tag text="默认" v-show="item.isDefault == 0" size="mini" shape="circle"
									type="warning"></u-tag>
							</view>
						</view>
					</view>
					<view class="font" style="padding-top: 15rpx">
						{{ item.province + item.city + item.county + item.address }}
					</view>
					<view style="margin: 25rpx 0rpx 25rpx 0rpx">
						<u-line></u-line>
					</view>
					<view class="font11" style="display: flex; justify-content: flex-end">
						<view @click="deleteClick(item.id)" style="padding-right: 35rpx">删除</view>
						<view @click="toDetail(item)">编辑</view>
					</view>
				</view>
			</view>
			
			<u-popup bgColor='transparent' :show="deleteShow" :round="26" mode="center">
				<view class="close">
					<view class="clmon">删除地址</view>
					<view class="clmonss">地址一旦删除，无法恢复</view>
					<view class="clmonss">是否确定删除？</view>
					<view class="clpmklj">
						<button v-on:click="deleteShow = false">取消</button>
						<button @click="deleteConfim">确定</button>
					</view>
				</view>
			</u-popup>
			<view class="address-btn" @click="addAddress">新增地址</view>
		</view>
</template>

<script>
	import config from '@/config';
	import {
		getAddressList,
		deteleAddress
	} from '@/api/account/account.js';
	import {
		toast
	} from '../../../utils/common';
	export default {
		data() {
			return {
				imgUrl: config.gillUrl,
				deleteShow: false,
				list: [],
				deleteId: 0 //要删除的id
			};
		},
		created() {
			this.getList();
		},
		onShow() {
			this.getList();
		},
		methods: {
			addAddress() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/Shipping/addAddress'
				});
			},
			// 获取列表
			async getList() {
				const res = await getAddressList();
				this.list = res.data;
			},
			// 删除
			deleteClick(id) {
				this.deleteShow = true;
				if (!id) {
					toast('请重新选择');
					return;
				}
				this.deleteId = id;
			},
			// 确认删除
			async deleteConfim() {
				const res = await deteleAddress(this.deleteId);
				let _this = this;
				if (res.code == 200) {
					_this.deleteShow = false;
					toast('删除成功');
					setTimeout(function() {
						_this.getList();
					}, 500);
				}
			},
			toDetail(item) {
				if (!item) {
					toast('请重新选择');
					return;
				}
				let orgDefaultId = 0;
				this.list.map((i) => {
					if (i.isDefault == 0) {
						orgDefaultId = i.id;
					}
				});
				uni.navigateTo({
					url: '/pages/AccountSecurity/Shipping/addAddress?id=' +
						item.id +
						'&isDefault=' +
						item.isDefault +
						'&address=' +
						item.address +
						'&city=' +
						item.city +
						'&county=' +
						item.county +
						'&phone=' +
						item.phone +
						'&province=' +
						item.province +
						'&receiver=' +
						item.receiver +
						'&orgDefaultId=' +
						orgDefaultId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-tag--warning {
		border: none;
		background: linear-gradient(270deg, #4463FF 0%, #3ADDEB 100%);
	}

	.Abouts {
		margin-left: 180rpx;
	}
	.address-btn {
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 800;
		text-align: center;
		line-height:85rpx;
		color: #ffffff;
		width: 680rpx;
		height: 77rpx;
		background: linear-gradient(270deg, #4463FF 0%, #3ADDEB 100%);
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx;
		opacity: 1;
		margin-left: 34.88rpx;
		margin-top: 20rpx;
	}
	.nodata {
		height: 100rpx !important;
	}

	.list-item {
		width:680rpx;
		height: 270rpx;
		border-radius: 30rpx;
		margin: 0 34.88rpx 30rpx;
		background-color: #130f25;
	}

	.font {
		font-size: 30rpx;
		font-family: 'font';
		font-weight: 400;
		color: #ffffff;
	}

	.font11 {
		font-size: 30rpx;
		font-family: 'font';
		font-weight: 800;
		color: #ffffff;
	}

	.close {
		width: 500rpx;
		height: 380rpx;
		background: #0d0e11;
		box-shadow: 0rpx 9rpx 26rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 26rpx;
		border: 2rpx solid #8a92a3;

		.clmon {
			font-size: 40rpx;
			font-family: 'font';
			font-weight: 800;
			color: #ffffff;
			text-align: center;
			margin: 52.33rpx 0;
		}

		.clmonss {
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;
			text-align: center;
		}

		.clpmklj {
			display: flex;
			margin: 40rpx 0;
			button:nth-child(2) {
				width: 180rpx;
				height: 78rpx;
				background: linear-gradient(270deg, #4463FF 0%, #3ADDEB 100%);
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 16rpx;
				font-size: 31rpx;
				line-height: 85rpx;
				font-family: 'font';
				font-weight: 800;
				color: #ffffff;
			}

			button:nth-child(1) {
				width: 180rpx;
				height: 78rpx;
				background: gray;
				border-radius: 16rpx;
				font-size: 31rpx;
				font-family: 'font';
				line-height: 85rpx;
				font-weight: 800;
				color: #ffffff;
			}
		}
	}
</style>